<template>
  <div>
    <el-space fill wrap :direction="horizontal" style="width: 100%">
      <el-card class="box-card-header"> </el-card>

      <el-card class="box-card-main">
        <el-container>
          <el-header>
            <div class="left-panel">
              <h2>发布列表</h2>
            </div>
            <div class="right-panel" id="right-panel">
              <el-button type="primary" @click="get_env_list" icon="el-icon-circle-plus">新建发布</el-button>

              <el-dialog v-model="appdialogVisible" width="50%">
                <template #header>
                  <h2>选择应用</h2>
                  <el-divider />
                </template>
                <div class="dialog-div">
                  <div class="left--">
                    <el-tabs tab-position="left" style="height: 100%" class="demo-tabs" type="border-card"
                      @tab-change="chgTab">
                      <el-tab-pane v-for="env in envList.env" :key="env" :name="env" :label="env">
                        {{ env }}
                        <el-divider />
                        <el-scrollbar height="35vh">
                          <p v-for="item in appList.app" :key="item" class="scrollbar-demo-item"
                            @click="summitapply(item)">{{
    item
}}
                          </p>
                        </el-scrollbar>

                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
                <template #footer>
                  <!-- <el-button @click="appdialogVisible = false">取 消</el-button> -->
                </template>
              </el-dialog>
              <el-dialog title="新建发布申请" width="70%" v-model="appinfodialogVisible">

                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                  :size="formSize" status-icon>
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title" />
                  </el-form-item>
                  <el-form-item label="git地址" prop="git_address">
                    <el-input v-model="ruleForm.git_address" />
                  </el-form-item>
                  <el-form-item label="分支" prop="branch">
                    <el-select v-model="ruleForm.branch" placeholder="beta_std">
                      <el-option v-for="branch in branchList.branch" :key="branch" :label="branch" :value="branch" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="备注" prop="desc">
                    <el-input v-model="ruleForm.desc" type="textarea" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="application_apply(ruleForm)">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>

              <el-button-group>
                <el-button>全部</el-button>
                <el-button>待审核</el-button>
                <el-button>发布成功</el-button>
                <el-button>发布失败</el-button>
                <el-button>其他</el-button>
              </el-button-group>
            </div>
          </el-header>
          <el-main class="nopadding">
            <el-table :data="handleList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" table-layout="auto"
              fit>
              <el-table-column label="申请时间" prop="apply_date"></el-table-column>
              <el-table-column label="申请标题" prop="apply_title"></el-table-column>
              <el-table-column label="应用" prop="apply_appname"></el-table-column>
              <el-table-column label="发布环境" prop="apply_env"></el-table-column>
              <el-table-column label="版本" prop="apply_version"></el-table-column>
              <el-table-column label="备注" prop="apply_remark"></el-table-column>
              <el-table-column label="状态" prop="apply_status">
              </el-table-column>
              <el-table-column label="操作" prop="apply">
                <template #default>
                  <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
                  <el-button link type="primary" size="small">Edit</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="handleList.length">
            </el-pagination>
          </el-main>
        </el-container>
      </el-card>
    </el-space>
  </div>
</template>

<script>
import { ref } from 'vue-demi';
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: "app_application",
  data () {
    return {
      sucess: 1,
      fail: 1,
      all: 1,
      other: 1,
      appdialogVisible: false,
      appinfodialogVisible: false,
      handleList: [],
      rowsList: [],
      tablesList: [],
      // 当前页
      currentPage: 1,
      // 每页多少条
      pageSize: 10,
      errorMessage: '',
      form: {
        name: "",
        number: "",
      },
      envList: {
        env: [],
      },
      appList: {
        app: []
      },
      branchList: {
        branch: ['beta_std', 'rc_std', 'master', 'master_std']
      },
      currEnv: ref(''),
      currApp: ref(''),
      ruleForm: reactive({
        title: '',
        git_address: '',
        branch: '',
        desc: '',
      }),
      rules: reactive({
        title: [
          { required: true, message: '请输入此次应用发布申请标题!', trigger: 'blur' },
        ],
        git_address: [
          {
            required: true,
            message: '请输入git地址!',
            trigger: 'blur',
          },
        ],
        branch: [
          {
            required: true
          }
        ]
      })
    };
  },
  methods: {

    summitapply: function (item) {
      this.appdialogVisible = false;
      this.appinfodialogVisible = true;
      this.currApp = item
      console.log(item)
      var that = this

      var data = {
        "env": that.currEnv,
        "appname": that.currApp
      }
      try {
        this.$API.app_apply.app_default_info.get(data).then(res => {
          if (res.code == 1) {
            var errorMessage = res.message;
            that.handleError(errorMessage);
          } else {
            that.ruleForm.git_address = res.default_git_addr,
              that.ruleForm.branch = res.default_git_branch
          }
        })
      } catch (error) {
        var errorMessage = '请求获取环境列表无响应，请联系管理员。';
        that.handleError(errorMessage)
      }
    },
    chgTab: function (env) {
      // this.currEnv = TabPaneName;
      this.currEnv = env;
      var that = this;
      var data = {
        "env": env
      }
      try {
        this.$API.app_apply.app_list.get(data).then(res => {
          if (res.code == 1) {
            var errorMessage = res.message;
            that.handleError(errorMessage);
          } else {
            that.appList.app = res.app_list
          }
        })
      } catch (error) {
        var errorMessage = '请求获取环境列表无响应，请联系管理员。';
        that.handleError(errorMessage)
      }
      console.log(env)
    },
    handleError (errorMessage) {
      ElMessage({
        showClose: true,
        message: errorMessage,
        type: 'error',
      })
    },

    get_env_list () {
      this.appdialogVisible = true
      var that = this;

      try {
        this.$API.app_apply.env_list.get().then(res => {
          if (res.code == 1) {
            var errorMessage = res.message;
            that.handleError(errorMessage);
          } else {
            that.envList.env = res.env_list
          }
        })
      } catch (error) {
        var errorMessage = '请求获取环境列表无响应，请联系管理员。';
        that.handleError(errorMessage)
      }
    },

    get_app_list (env) {
      var that = this;
      try {
        this.$API.app_apply.app_list.get(env).then(res => {
          if (res.code == 1) {
            var errorMessage = res.message;
            that.handleError(errorMessage);
          } else {
            that.appList.app = res.app_list
          }
        })
      } catch (error) {
        var errorMessage = '请求获取环境列表无响应，请联系管理员。';
        that.handleError(errorMessage)
      }
    },

    application_apply (ruleForm) {
      var data = {
        "env": this.currEnv,
        "build_app_name": this.currApp,
        "build_title": ruleForm.title,
        "git_address": ruleForm.git_address,
        "branch": ruleForm.branch,
        "build_remark": ruleForm.desc
      }
      console.log(ruleForm)
      var that = this;
      try {
        this.$API.app_apply.job_create.post(data).then(res => {
          if (res.code == 1) {
            var errorMessage = res.message;
            that.handleError(errorMessage);
          } else {
            ElMessage({
              message: res.message,
              type: 'success',
            })
            this.appinfodialogVisible = false;
          }
        })
      } catch (error) {
        var errorMessage = '请求获取环境列表无响应，请联系管理员。';
        that.handleError(errorMessage)
      }

    }
  },
  mounted () {
    var that = this;
    // 获取已发布的任务列表
    try {
      this.$API.app_apply.job_list.get().then(res => {
        if (res.code == 1) {
          var errorMessage = res.message;
          that.handleError(errorMessage);
        } else {
          that.handleList = res.job_list
        }
      })
    } catch (error) {
      var errorMessage = '请求后端无响应，请联系管理员。';
      that.handleError(errorMessage)
    }

  }
};

</script>

<style>
.box-card-header {
  margin: 10px;
  height: 100px;
}

.box-card-main {
  margin: 10px;
}

#right-panel button {
  margin-left: 0px;
}

.dialog-div {
  height: 40vh;
  overflow: auto;
}

.left-- {
  padding: auto;
  height: 100%;
}

.el-tabs__item {
  width: 150px;
  height: 50px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);

}

.scrollbar-demo-item:hover {
  background-color: yellow;
  cursor: pointer
}
</style>
